<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../vue2.0+vue3.0/vue.js"></script>
    <script src="../vue2.0+vue3.0/vue-min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- placeholder	文本框为空时显示的一个示例值。 -->
        <input type="text" v-bind:placeholder="tips"/>
        <div>1+2{{1+2}}</div>
        <div>fanzhuan{{tips.split('').reverse().join('')}}</div>
        <!-- 在插值和属性绑定指令中，编写JS -->
        <div :title="'box'+index">这是第{{index}}div</div>
    </div>
    <script>
        const vr = new Vue({
            el: "#app", //表示当前的vr属性要控制的类名
            data: {
                tips: 'qingshuyonghuming',
                index:3
            }
        })
    </script>
</body>

</html>